<template>
	<div class="chart_box">
		<div class="ico border_top"></div>
		<div class="ico border_bottom"></div>
		<div class="chart_title">
			<span>{{ title }}</span>
		</div>
		<div class="chart_echarts">
			<slot name="echarts"></slot>
		</div>
	</div>
</template>

<script>
    export default {
        name: "Diagramcontainer",
        props: {
            title: {
                type: String,
                default: "我是默认值",
            },
        },
    };
</script>

<style lang="less" scoped>
	.chart_box {
		width: 100%;
		height: 100%;
		border: 0.025rem solid rgba(74, 179, 223, 0.5);
		border-radius: 0.125rem;
		position: relative;
		box-sizing: border-box;
		padding: 0.125rem 0.1875rem;
		.chart_title {
			color: #6666ef;
			height: 0.25rem;
			font-size: 0.2rem;
			font-weight: bolder;
			span::before {
				content: " ";
				display: inline-block;
				width: 0.025rem;
				height: 0.25rem;
				vertical-align: middle;
				text-transform: uppercase;
				margin-right: 0.125rem;
				background-color: #4ab3df;
			}
		}
		.chart_echarts {
			width: 100%;
			height: calc(100% - 0.5rem);
			margin-top: 0.125rem;
			color: #fff;
		}
		.ico {
			position: absolute;
			width: 15%;
			height: 2px;
		}
		.border_top {
			top: -2px;
			right: 25px;
			background: linear-gradient(270deg, #000000 75%, #4ab3df 50%);
		}
		.border_bottom {
			bottom: -2px;
			left: 25px;
			background: linear-gradient(90deg, #000000 75%, #4ab3df 50%);
		}
	}
</style>
